<template>
    <div ref="chartView" class="chart-view"></div>
</template>

<script setup>
import {ref,onMounted,watch} from "vue"
import * as echarts from 'echarts';
const props = defineProps({
    title:{
        type:String,
        default:''
    },
    list:{
        type:Array,
        default:[]
    },
    min:{
        type:Number,
        default:0
    },
     max:{
        type:Number,
        default:200
    }, 
    splitNumber:{
        type:Number,
        default:5
    },
    xList:{
        type:Array,
        default:[]
    },
    type:{
        type:Number,
        default:1
    }
})
const chartView = ref(null)

watch(()=>props.list,(n,o)=>{
    setChartView()
})
watch(()=>props.xList,(n,o)=>{
    setChartView()
})
onMounted(() => {
    setChartView()
})
const setChartView = ()=>{
    let chartDom = chartView.value;
    let myChart = echarts.init(chartDom);
    let option = {
        title: {
            text: props.title,
            left: 'left',
            textStyle:{
                fontSize:15
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: props.xList.map((item)=>item.title)
        },
        grid: {
            left: '0',
            right: '2%',
            bottom:'0',
            containLabel: true
        },
        toolbox: {
            feature: {}
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.list.map((min)=>min.createTime)
        },
        yAxis: {
            type: 'value'
        },
        series:  props.xList.map((item)=>{
            return {
                name: item.title,
                type: 'line',
                showSymbol: false,
                data: props.list.map((min)=>min[item.key])
            }
        })
    };

    option && myChart.setOption(option);
    window.addEventListener('resize',()=> {
          myChart.resize(); 
    });
}
</script>

<style lang="scss" scoped>
.chart-view{
    height: 100%;
    width:100%;
    position: absolute;
}
</style>